<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>播放器</title>
    <style type="text/css">
        .a{
        width: 250px;
        height: 250px;
        position: relative;
        }
        .bg{
        position:absolute;
        }
       .bg1{
        width: 100%;
        height: 100%;
        background-image: linear-gradient(180deg,#62426c 20%,#d4b5d5,#91576f 80%);
       }
       .bg2{
        width: 70%;
        height: 70%;
        margin: 15% 15%;
        border-radius: 10%;
        background-image: linear-gradient(180deg,#945278,#492646);
       }
       .bg3{
        width: 48%;
        height: 40%;
        margin: 26% 22%;
        border: 10px #000 solid;
        border-radius: 10%;
        background-color: #000;
       }
       .bg4{
        width: 42%;
        height: 35%;
        margin: 33% 29%;
        background-image: linear-gradient(150deg,#fab097 20%,#a85a67 47%)
       }
       .bg5{
        width: 25%;
        height: 25%;
        margin: 38% 37%;
        border-radius: 50%;
        background-color: #fff;
       } 
       .san{
        width: 0;
        height: 0;
        margin: 40.5% 47%;
        border-top: 26px solid transparent;   
        border-bottom: 26px solid transparent;
        border-left: 24px solid #000;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="bg bg1"></div>
        <div class="bg bg2"></div>
        <div class="bg bg3"></div>
        <div class="bg bg4"></div>
        <div class="bg bg5"></div>
        <div class="bg san"></div>
    </div>
</body>
</html>